<template>
  <section class="add">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="试卷名称">
        <el-input v-model="form.source"></el-input>
      </el-form-item>
      <el-form-item label="介绍">
        <el-input v-model="form.description"></el-input>
      </el-form-item>
      <el-form-item label="所属学院">
        <el-input v-model="form.institute"></el-input>
      </el-form-item>
      <el-form-item label="所属专业">
        <el-input v-model="form.major"></el-input>
      </el-form-item>
      <el-form-item label="年级">
        <el-input v-model="form.grade"></el-input>
      </el-form-item>
      <el-form-item label="考试日期">
        <el-col :span="11">
          <el-date-picker placeholder="选择日期" v-model="form.examDate" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="持续时间">
        <el-input v-model="form.totalTime"></el-input>
      </el-form-item>
      <el-form-item label="总分">
        <el-input v-model="form.totalScore"></el-input>
      </el-form-item>
      <el-form-item label="考试类型">
        <el-input v-model="form.type"></el-input>
      </el-form-item>
      <el-form-item label="考生提示">
        <el-input type="textarea" v-model="form.tips"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button type="text" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
import { ref, onMounted, getCurrentInstance } from 'vue'; // 引入 getCurrentInstance

export default {
  setup() {
    const form = ref({
      source: null,
      description: null,
      institute: null,
      major: null,
      grade: null,
      examDate: null,
      totalTime: null,
      totalScore: null,
      type: null,
      tips: null,
      paperId: null,
    });

    // 获取当前 Vue 实例的上下文，访问 $axios、$message 和 $router
    const { proxy } = getCurrentInstance();

    // 格式化时间的函数
    const formatTime = (date) => {
      let year = date.getFullYear();
      let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    };

    // 提交表单
    const onSubmit = async () => {
      let examDate = formatTime(form.value.examDate);
      form.value.examDate = examDate.substr(0, 10);

      try {
        // 获取paperId
        const paperResponse = await proxy.$axios(`/api/examManagePaperId`);
        form.value.paperId = paperResponse.data.data.paperId + 1; // 实现paperId自增1

        // 提交数据
        const response = await proxy.$axios({
          url: '/api/exam',
          method: 'post',
          data: { ...form.value },
        });

        if (response.data.code === 200) {
          proxy.$message({
            message: '数据添加成功',
            type: 'success',
          });
          proxy.$router.push({ path: '/index/selectExam' });
        }
      } catch (error) {
        console.error(error);
      }
    };

    // 取消操作
    const cancel = () => {
      form.value = {}; // 清空表单
    };

    return {
      form,
      onSubmit,
      cancel,
    };
  },
};
</script>

<style lang="less" scoped>
.add {
  padding: 0px 40px;
  width: 400px;
}
</style>
